<template>
  <div class="">
    <!-- <ToolItem title="环境设置" type="environment" @select="$emit('active', $event)">
      <icon-cloud :style="{ fontSize: '25px' }" />
    </ToolItem> -->
    <!-- <div class="right-tools" v-if="active == 'environment'"> -->
    <div class="wh" v-if="true" style="display: flex; flex-wrap: wrap;align-content: flex-start;">
      <!-- 经纬网 -->
      <div :style="{ backgroundColor: jingweiwang ? '#068CC0' : '' }" class="tianqiitemclass"
        @click="jingweiwangclick((jingweiwang = !jingweiwang))" title="经纬网">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/jingweiwangge.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- zxy网格3857 -->
      <div :style="{ backgroundColor: zxywang ? '#068CC0' : '' }" class="tianqiitemclass"
        @click="zxywangclick((zxywang = !zxywang))" title="系统数据库文件网格3857">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/zxy.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- zxy网格4326 -->
      <div :style="{ backgroundColor: jzxywang ? '#068CC0' : '' }" class="tianqiitemclass"
        @click="jzxywangclick((jzxywang = !jzxywang))" title="系统数据库文件网格4326">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/zxy.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 罗盘 -->
      <div :style="{ backgroundColor: showCompass ? '#068CC0' : '' }" class="tianqiitemclass" @click="showCompass = !showCompass"
        title="罗盘">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/luopan.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 比例尺 -->
      <div :style="{ backgroundColor: showDistanceLegend ? '#068CC0' : '' }" class="tianqiitemclass" @click="showDistanceLegend = !showDistanceLegend"
        title="比例尺">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/bilichi.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 状态栏 -->
      <div :style="{ backgroundColor: estore.stausbarshow ? '#068CC0' : '' }" class="tianqiitemclass" @click="estore.stausbarshow = !estore.stausbarshow"
        title="状态栏">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/fps.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 鸟瞰图 -->
      <div :style="{ backgroundColor: estore.eagleviewshow ? '#068CC0' : '' }" class="tianqiitemclass" @click="estore.eagleviewshow = !estore.eagleviewshow"
        title="鸟瞰图">
        <!-- <icon-cloud :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/niaokantu.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
      <!-- 清空 -->
      <div :style="{ backgroundColor: '' }" class="tianqiitemclass" @click="qingkongclick()" title="清空">
        <!-- <icon-tool :style="{ fontSize: '28px' }" /> -->
        <img :src="'/assets/fenxi/qingkong.png'" alt="" style="width: 20px;filter: invert(100%) brightness(550%);">
      </div>
    </div>
  </div>
</template>

<script>
// import ToolItem from '@/components/map/tools/ToolItem.vue'

import _ from 'lodash'
import './Graticule.js'
import { useEarthStore } from '@/stores/earth'

let pickEntity = null
export default {
  name: '',
  components: {
    // ToolItem,
  },
  data() {
    return {
      itemchoose: false,
      daqi: false,
      yin: false,
      qing: false,
      yu: false,
      xue: false,
      jingweiwang: false,
      zxywang: false,
      jzxywang: false,
      lisanwangge: false,
      terrainExaggeration: 1.0,
      dixingkuazhang: 1.0,
      showCompass: 1.0,
      showDistanceLegend: 1.0,
      estore: useEarthStore()
    }
  },
  computed: {
    active() {
      // return this.activeToolParent.value || this.activeTool.value || null
      return true
    }
  },
  // inject: ['activeTool','activeToolParent'],
  watch: {

  },
  mounted() {
    this._gridImagery = new Cesium.GridImageryProvider()
    this._jzxyImagery = new Cesium.TileCoordinatesImageryProvider();
    this._zxyImagery = new Cesium.TileCoordinatesImageryProvider({
      tilingScheme: new Cesium.WebMercatorTilingScheme(),
      color: Cesium.Color.fromCssColorString("#F00")
    });
    // require('./Graticule.js')

    // console.log(window.Graticule);
    this._jingweiImagery = new window.Graticule({
      tileWidth: 512,
      tileHeight: 512,
      numLines: 10,
      color: Cesium.Color.GREEN,//线颜色
      fontColor: Cesium.Color.YELLOW, // 文字颜色
      weight: 2.8, // 线宽度|默认0.8
      zoomInterval: [
        Cesium.Math.toRadians(0.05),
        Cesium.Math.toRadians(0.1),
        Cesium.Math.toRadians(0.2),
        Cesium.Math.toRadians(0.5),
        Cesium.Math.toRadians(1.0),
        Cesium.Math.toRadians(2.0),
        Cesium.Math.toRadians(5.0),
        Cesium.Math.toRadians(10.0)
      ]// 不同地图缩放级别显示网格的间隔
    }, viewer.scene);

    // console.log(this._jingweiImagery);
    // this._jingweiImagery.setVisible(!this._jingweiImagery.isVisible());


    // 绑定大气
    window.XE.MVVM.bind(
      this,
      'daqi',
      window.earth,
      'weather.atmosphere.enabled'
    )
    // 绑定雨
    window.XE.MVVM.bind(
      this,
      'yu',
      window.earth,
      'weather.rainPostProcess.enabled'
    )
    // 绑定雪
    window.XE.MVVM.bind(
      this,
      'xue',
      window.earth,
      'weather.snowPostProcess.enabled'
    )

    // 绑定罗盘
    window.XE.MVVM.bind(
      this,
      'showCompass',
      window.earth,
      'camera.navigator.showCompass'
    )
    // 绑定比例尺
    window.XE.MVVM.bind(
      this,
      'showDistanceLegend',
      window.earth,
      'camera.navigator.showDistanceLegend'
    )

    XE.MVVM.bind(
      this,
      "terrainExaggeration",
      earth.terrainEffect,
      "terrainExaggeration"
    )
    // this.initMap()
  },
  methods: {
    switch2d3d(){
      // viewer.scene.mode = Cesium.SceneMode.MORPHING
      if (viewer.scene.mode === Cesium.SceneMode.SCENE3D) {
        viewer.scene.mode = Cesium.SceneMode.COLUMBUS_VIEW
      }else{
        viewer.scene.mode = Cesium.SceneMode.SCENE3D
      }
    },
    closewindow() {
      this.qingkongclick()
    },
    qingkongclick() {
      // 阴晴雨雪 网格 离散网格
      this.yu = false
      this.xue = false
      this.yin = false
      this.changetianqiyin(false)
      this.qing = false
      this.changetianqiqing(false)

      this.jingweiwang = false
      if (_.has(this, '_tmpgridImagery')) {
        this.jingweiwangclick(false)
      }

      this.zxywang = false
      if (_.has(this, '_tmpzxyImagery')) {
        this.zxywangclick(false)
      }

      this.jzxywang = false
      if (_.has(this, '_tmpjzxyImagery')) {
        this.jzxywangclick(false)
      }

      // this.lisanwangge = false
      // this.toggleMoerGrid(false)
    },
    jingweiwangclick(type) {
      if (type) {
        this._jingweiImagery.setVisible(true)
        this._tmpgridImagery =
          viewer.imageryLayers.addImageryProvider(
            this._jingweiImagery
          )

      } else {
        this._jingweiImagery.setVisible(false)
        viewer.imageryLayers.remove(this._tmpgridImagery)
      }
      // if (type) {
      //   this._tmpgridImagery =
      //     viewer.imageryLayers.addImageryProvider(
      //       this._gridImagery
      //     )
      // } else {
      //   viewer.imageryLayers.remove(this._tmpgridImagery)
      // }
    },

    jzxywangclick(type) {
      if (type) {
        this._tmpjzxyImagery =
          viewer.imageryLayers.addImageryProvider(
            this._jzxyImagery
          )
      } else {
        viewer.imageryLayers.remove(this._tmpjzxyImagery)
      }
    },

    zxywangclick(type) {
      if (type) {
        this._tmpzxyImagery =
          viewer.imageryLayers.addImageryProvider(
            this._zxyImagery
          )
      } else {
        viewer.imageryLayers.remove(this._tmpzxyImagery)
      }
    },
    changetianqiqing(type) {
      if (type) {
        this.yin = false
        window.earth.weather.skyBox = {
          skyBoxOnGround: true,
          westSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/west.jpg',
          southSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/south.jpg',
          eastSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/east.jpg',
          northSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/north.jpg',
          topSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/top.jpg',
          bottomSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky8/bottom.jpg',
        }
      } else {
        window.earth.weather.skyBox.skyBoxOnGround = false
      }
    },
    changetianqiyin(type) {
      if (type) {
        this.qing = false
        window.earth.weather.skyBox = {
          skyBoxOnGround: true,
          westSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/west.jpg',
          southSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/south.jpg',
          eastSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/east.jpg',
          northSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/north.jpg',
          topSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/top.jpg',
          bottomSkyBoxOnGroundImageUri:
            '/assets/skyboxes/sky6/bottom.jpg',
        }
      } else {
        window.earth.weather.skyBox.skyBoxOnGround = false
      }
    },
    changetianqi(type) {
      switch (type) {
        case 'yin':
          this.yin = !this.yin
          this.qing = false
          if (this.yin) {
            window.earth.weather.skyBox = {
              skyBoxOnGround: true,
              westSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/west.jpg',
              southSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/south.jpg',
              eastSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/east.jpg',
              northSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/north.jpg',
              topSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/top.jpg',
              bottomSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky6/bottom.jpg',
            }
          } else {
            window.earth.weather.skyBox.skyBoxOnGround = false
          }
          break
        case 'qing':
          this.qing = !this.qing
          this.yin = false
          if (this.qing) {
            window.earth.weather.skyBox = {
              skyBoxOnGround: true,
              westSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/west.jpg',
              southSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/south.jpg',
              eastSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/east.jpg',
              northSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/north.jpg',
              topSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/top.jpg',
              bottomSkyBoxOnGroundImageUri:
                '/assets/skyboxes/sky8/bottom.jpg',
            }
          } else {
            window.earth.weather.skyBox.skyBoxOnGround = false
          }
          break

        default:
          break
      }
    },
    toolSelect() {
      // this.itemchoose = !this.itemchoose
    },
    /**
     * 离散格网
     */
    toggleMoerGrid(type) {
      if (type) {
        this.getGridByType()
      } else {
        this.clearGrid()
      }
    },
    // 请求获取网格
    // 获取屏幕可视范围
  },
}
</script>

<style lang="scss" scoped>
.tianqiitemclass {
  border: 1px solid #fff9;
  border-radius: 5px;
  margin: 5px;
  cursor: pointer;
  // border-radius: 6px 6px 6px 6px;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;

  &:hover {
    background-color: #068cc088;
  }
}

.zhjx-iconfont {
  font-size: 25px !important;
}

.right-tools {
  border-radius: 6px 6px 6px 6px;
  // position: absolute;
  // right: 75px;
  // top: 20px;
  z-index: 2;
  width: 50px;
  background: #083967;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
